<template>
  <div class="audition99">
    <p>border-image允许在元素的边框上绘制图像</p>
    <p>使用该属性时，border-style所设置的边框样式将被替换掉。</p>
    <p>使用该属性时，边框样式必须存在</p>
    <h3>属性介绍：</h3>
    <p>border-image-source: 加载图片边框资源，默认none</p>
    <p>border-image-slice: 控制区域的大小，默认100%</p>
    <p>border-image-width: 指定边框图片在各个边框的宽度，默认1</p>
    <p>border-image-outset: 定义边框图像可超出边框盒的大小，默认0</p>
    <p>border-image-repeat: 定义图片如何填充边框。值有stretch拉伸 / repeat平铺 / round会放大或缩小图片以达到平铺效果 / space会用空格填充 。 默认stretch </p>
    <p>使用举例： </p>
    <code class="code">
      &lt;div class="box"&gt;&lt;/div&gt;<br />
      <br />
      .box {<br />
          <span class="indient">width: 200px;</span><br />
          <span class="indient">height: 200px;</span><br />
          <span class="indient">border: 5px solid transparent;</span><br />
          <span class="indient">/* border-image-source: linear-gradient(green, red);</span><br />
          <span class="indient">border-image-slice: 1;</span><br />
          <span class="indient">border-image-width: 1;</span><br />
          <span class="indient">border-image-outset: 0;</span><br />
          <span class="indient">border-image-repeat: stretch; */</span><br />
          <span class="indient">border-image: linear-gradient(green, red) 1;</span><br />
      }
    </code>
    <p>注意，用了该属性，可能出现无法使用border-radius的问题。</p>
  </div>
</template>

<script>
export default {
  name: 'Audition99'
}
</script>

<style>

</style>